<template>
    <div class="tadleList">
        <div class="guan">
            <el-button type="success" @click="cli(1)">+添加管理员</el-button>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="form.pwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="form.realname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="form.mobile" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户编号">
                        <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <div style="height:500px; overflow-y: auto; display: flex;justify-content: space-around;">
                        <el-form-item label="角色">
                        <label v-for="item in roleLists" :key="item.id">
                        <input type="checkbox" v-model="item.flag">{{ item.name }}
                        </label>
                    </el-form-item>
                </div>
                    
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div style="height: 380px;">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="用户名" width="120">
                    <template slot-scope="scope">{{ scope.row.username }}</template>
                </el-table-column>
                <el-table-column prop="realname" label="姓名" ailgn="center">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号码" ailgn="center">
                </el-table-column>
                <el-table-column prop="dateLogin" label="登录时间" ailgn="center">
                </el-table-column>
                <el-table-column prop="ipLogin" label="登录ip" ailgn="center">
                </el-table-column>
                <el-table-column prop="isLock" label="状态" ailgn="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="success" round style="border-radius: 3px;"> {{ scope.isLock |
                            fmtIsLock }}</el-button>
                        <el-button v-if="scope.isLock" size="small" type="warning" round> {{ scope.isLock | fmtIsLock
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" ailgn="center">
                    <template slot-scope="scope">{{ scope.row.date }}
                        <span @click="cli(scope.row)" style="color: yellowgreen; margin:4px;">编辑</span>
                        <span style="color: blue; margin:4px">重置密码</span>
                        <span style="color: red ;" @click="disable(scope.row)">禁用</span>
                        <span style="color: red;  margin:4px">删除</span>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <el-button type="danger" @click="deletAll">批量删除</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4, 5]" :page-size="parmas.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>


<script>
import { tadleList, roleList,save } from '@/api/guanlie.js'
export default {
    data() {
        return {
            title:"",
            dialogFormVisible: false,
            form: {
                username: '',
                pwd: '',
                realname: '',
                mobile: '',
                id: '',
                roleIds:[]
            },
            rules: {
                username: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                pwd:[
                    {required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                realname:[
                    {required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            },
            parmas: { page: 1, pageSize: 10 },
            currentPage: 1,
            total: 10,
            delete: [],
            tableData: [],
            multipleSelection: [],
            roleLists: []
        }
    },
    mounted() {
        this.getList(),
        this.getRoleList()
    },
    methods: {
        async saveEdit(params){
            let data=await save(params)
            console.log(data);
            if(data.msg=="success"){
                this.$message({
                    message:'成功',
                    type:'success',
                    duration:1000
                });
                this.dialogFormVisible=false
            }else{
                this.$message({
                    message:data.msg,
                    type:'error',
                    duration:1000
                });
            }
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form);
            console.log(this.roleLists);
            this.form.roleIds=this.roleLists.filter(r=>r.flag).map(r=>r.id)
            console.log(this.form);
            this.saveEdit(this.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cli(val) {
        console.log(val);
        if(val==1){
            this.title="添加",
            this.form={
                username: '',
                pwd: '',
                realname: '',
                mobile: '',
                id: '',
                roleIds:[]
            },
            this.roleLists.forEach(r=>r.flag=false)
    }else {this.title="编辑"
        this.form.username=val.username
        this.form.pwd=val.pwd
        this.form.realname=val.realname
        this.form.mobile=val.mobile
        this.form.id=val.id
    } 
               this.dialogFormVisible = true
    },
    async getRoleList() {
            let { data: res } = await roleList()
            this.roleLists=res;
            this.roleLists.forEach(r=>r.flag=false)
        },
        async getList() {
            tadleList(this.parmas)
            let { data: res } = await tadleList(this.parmas)
            this.total = res.totalRow
            console.log(res);
            this.tableData = res.result
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.delete = val
            console.log(this.delete);
        },
        deletAll() {
            this.$confirm("删除无法恢复,是否继续?", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(this.delete);

                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        disable(row) {
            console.log(row.id);
        },
        handleSizeChange(val) {
            this.parmas.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.parmas.page = val
            this.getList()
        }
    },
    filters: {
        fmtIsLock(val) {
            console.log(1);
            if (val) return "禁用"
            else return "成功"
        }
    }
    }

</script>
